<template>
	<div>
		<el-tabs type="card" v-model="activeTab" @tab-click="tabClick">
			<el-tab-pane v-for="tab in tabs" :key="tab.value" :label="tab.label" :name="tab.value">
				<div class="plr-2 pt-2 list-box">
					<transition name="fade-transform" mode="out-in">
						<keep-alive>
							<cards :key="tab.value" v-if="tab.value == activeTab" :list="tab.list">
								<template #default="{ item }">
									<el-card
										shadow="never"
										class="mb-2 cards-item"
										:class="{
											discount: item.sc_type == 2,
											period: item.sc_type == 3,
											course: item.sc_type == 5,
											'course-all': item.sc_type == 4,
											stored_value: item.sc_type == 1,
											grayscale: [0, 2].includes(item.status)
										}"
									>
										<div class="top">
											<div slot="header" class="cards-item__head">
												{{ item.card_name }}
												<span class="tag white ml-1">
													{{ item.sc_type_dec }}
												</span>
											</div>
											<el-row :gutter="0" class="cards-item__info">
												<el-col :span="8" v-if="item.sc_type == 1">
													<div class="label">卡内余额</div>
													<div class="value">
														￥{{ item.card_balance || 0 }}
													</div>
												</el-col>
												<el-col :span="8" v-else-if="item.sc_type == 2">
													<div class="label">卡内折扣</div>
													<div class="value">{{ item.discount }}折</div>
												</el-col>
												<el-col :span="8" v-else-if="item.sc_type == 3">
													<div class="label">卡内时段</div>
													<div class="value">
														{{ item.content_data.time_range }}
													</div>
												</el-col>

												<el-col :span="8" v-else-if="item.sc_type == 4">
													<div class="label">卡内余次</div>
													<div class="value">
														{{ parseInt(item.card_balance || 0) }}次
													</div>
												</el-col>
												<el-col :span="8" v-else>
													<div class="label">卡内余次</div>
													<div class="value">{{ item.mount || 0 }}次</div>
												</el-col>
												<el-col :span="8">
													<div class="label">购买价格</div>
													<div class="value">
														￥{{ item.real_price || 0 }}
													</div>
												</el-col>
												<el-col :span="8">
													<div class="label">购买时间</div>
													<div class="value">
														{{ item.addtime | dateFormat }}
													</div>
												</el-col>
											</el-row>
										</div>
										<!-- <el-divider /> -->
										<el-row
											type="flex"
											justify="space-between"
											align="middle"
											style="padding: 10px 15px"
											class="card-foot"
										>
											<div class="validity-timer">
												<span class="label">有效期至：</span>
												<span>{{ item.etime }}</span>
											</div>
											<el-button class="to-detail" @click="openDetail(item)">
												详情
											</el-button>
										</el-row>
									</el-card>
								</template>
							</cards>
						</keep-alive>
					</transition>
				</div>
			</el-tab-pane>
		</el-tabs>
		<card-detail ref="detail" />
	</div>
</template>
<script>
	import { mapGetters } from "vuex";
	import CardDetail from "./card-detail";
	export default {
		provide() {
			return {
				getCardList: () => {
					this.getList(this.activeTab);
				}
			};
		},
		props: {
			detail: {
				type: Object,
				default: () => ({})
			}
		},
		components: {
			CardDetail,
			Cards: {
				props: {
					list: {
						type: Array,
						default: () => []
					}
				},
				computed: {
					...mapGetters(["browser"])
				},
				render() {
					if (!this.list.length) {
						return <cl-empty tips="暂无卡项" />;
					}
					let list = this.list.map((v, i) => {
						const content_data = v.content_data || {};
						let item = {
							...v,
							mount: content_data.mount || 0,
							discount: content_data.discount / 10
						};
						return (
							<el-col lg={this.browser.width > 1370 ? 6 : 8} md={12} sm={24} key={i}>
								{this.$scopedSlots.default({ item })}
							</el-col>
						);
					});
					return <el-row gutter={20}>{list}</el-row>;
				}
			}
		},
		data() {
			return {
				activeTab: "0",
				tabs: [
					{ label: "全部", value: "0", list: [] },
					{ label: "有效", value: "1", list: [] },
					{ label: "失效", value: "2", list: [] }
				]
			};
		},
		methods: {
			init() {
				this.activeTab = "0";
				this.getList();
			},
			tabClick(tab) {
				this.getList(tab.name);
			},
			// 列表
			async getList(type = "0") {
				const { cus_id } = this.detail;
				const data = await this.$service.servicecard.cardlist({
					cus_id,
					type: type == "0" ? "" : type
				});
				let currIdx = this.tabs.findIndex((v) => v.value == type);
				this.tabs[currIdx].list = data;
			},
			// 打开详情
			openDetail(item) {
				this.$refs.detail.open(item);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.list-box {
		border: 1px solid #e4e7ed;
		border-top: none;
		border-radius: 0 0 4px 4px;
	}
	::v-deep {
		.el-card {
			border-radius: 6px;
			box-shadow: 0px 2px 8px 0px rgba(169, 169, 169, 0.3);
		}
		.el-card__body {
			padding: 0;
		}
	}

	.cards-item {
		&.discount {
			// background-color: #35a69e;
			background: #156DFF;
			background-size: cover;
		}
		&.period {
			// background-color: #003a9d;
			background: #156DFF;
			background-size: cover;
		}
		&.course {
			// background-color: #018cf7;
			background: #156DFF;
			background-size: cover;
		}
		&.course-all {
			// background-color: #e98216;
			// background: url("~@/assets/img/course-all-long.png") no-repeat;
			background: #156DFF;
			background-size: cover;
		}
		&.stored_value {
			// background: url("~@/assets/img/stored_value_long.png") no-repeat;
			background: #156DFF;
			background-size: cover;
		}
		.top {
			height: 160px;

			.cards-item__head {
				padding: 15px;
				// border-bottom: 1px dashed #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #fff;
			}
			.tag {
				background: rgba(0, 0, 0, 0.3);
				// border-color: rgba(0, 0, 0, 0.3);
				border: none;
				font-size: 9px;
			}
			.cards-item__info {
				text-align: center;
				padding: 22px 0;
				// padding-bottom: 0;
				.label {
					color: #e6e6e6;
					margin-bottom: 6px;
					font-size: 12px;
				}
				.value {
					color: #fff;
					font-size: 16px;
					margin-top: 10px;
				}
			}
		}
		::v-deep {
			.el-divider {
				background: #ebeef5;
				opacity: 0 !important;
				margin: 20px 0;
			}
		}
		// &__head {
		// 	padding: 10px 15px;
		// 	color: #fff;
		// 	// background-color: $primary;
		// 	display: flex;
		// 	justify-content: space-between;
		// 	align-items: center;
		// 	line-height: 1;
		// }
		.card-foot {
			background: rgba(0, 0, 0, 0.1);
			color: #fff;
			.to-detail {
				background: transparent;
				color: #fff;
			}
		}
	}
</style>
